import React, { FC } from 'react';
import cn from 'classnames';

import { Breadcrumb, BreadcrumbProps } from '../breadcrumb/Breadcrumb';

if (process.env.BROWSER) {
    require('../static/styles/breadcrumb.scss');
}

const COMPONENT = 'BreadcrumbNav';

interface BreadcrumbNavProps {
    crumbs: Omit<BreadcrumbProps, 'isCurrent'>[];
}

const BreadcrumbNav: FC<BreadcrumbNavProps> = (props) => {
    if ((props.crumbs?.length ?? -1) <= 0) {
        return null;
    }

    return (
        <nav className="bcb-nav">
            <ol>
                {props.crumbs?.map((crumb, index) => {
                    return (
                        <li key={`${COMPONENT}_${index}`}>
                            <Breadcrumb {...crumb} isCurrent={index === props.crumbs.length - 1} />
                        </li>
                    );
                })}
            </ol>
        </nav>
    );
};

BreadcrumbNav.displayName = 'BreadcrumbNav';

export { BreadcrumbNav, BreadcrumbNavProps };
